<!-- 添加加工商 -->
<template>
  <view>
    <hx-navbar ref="hxnb" :config="config"></hx-navbar>
    <clHeadTab
      class="tab-view"
      :modelData="modelData"
      @change="tabChange"
    ></clHeadTab>
    <view>
      <info v-show="componentsName == 'info'" ref="info"></info>
      <contact v-show="componentsName == 'contact'" ref="contact"></contact>
      <account v-show="componentsName == 'account'" ref="account"></account>
      <invoicing
        v-show="componentsName == 'invoicing'"
        ref="invoicing"
      ></invoicing>
      <other v-show="componentsName == 'other'" ref="other"></other>
    </view>
    <view class="fixed-btn" v-if="componentsName != 'info'">
      <u-button
        text="保存"
        @click="save()"
        type="primary"
        shape="circle"
        color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
      ></u-button>
    </view>
    <view class="fixed-btn flex" v-if="componentsName == 'info'">
      <u-button
        text="名片识别"
        type="primary"
        class="card-btn"
        shape="circle"
        color="#ddf0ff"
        border="none"
      ></u-button>
      <u-button
        text="保存"
        type="primary"
        class="save-btn"
        shape="circle"
        color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
        @click="save"
      ></u-button>
    </view>
  </view>
</template>

<script>
import clHeadTab from "@/components/cl-head-tab/cl-head-tab.vue";
import info from "./components/info.vue";
import contact from "./components/contact.vue";
import account from "./components/account.vue";
import invoicing from "./components/invoicing.vue";
import other from "./components/other.vue";
import { addOrUpdateData } from "@/apis/inventory/converter";
export default {
  name: "",
  components: {
    clHeadTab,
    info,
    contact,
    account,
    invoicing,
    other,
  },
  data() {
    return {
      config: {
        title: "加工商",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [],
      },
      modelData: [
        { label: "信息", name: "info" },
        { label: "联系", name: "contact" },
        { label: "账号", name: "account" },
        { label: "开票", name: "invoicing" },
        { label: "其他", name: "other" },
      ],
      componentsName: "info",
      build: {
        code: "", // 编号
        name: "", //名称
        typeId: 1, // 布匹id
        typeName: "布匹", // 布匹name
        catId: "1597506548639334400", // 分类
        catName: null, // 分类name
        shopId: "1597506542394015744", //门店id
        shopName: "总部", // 门店name
        settlementTypeId: "1638445103758573568", // 结款方式
        settlementTypeName: "234", // 结款id
        isEnable: true, // 是否启用
        remarks: "", // 备注
        originDebt: "10000", // 欠款
        labelList: null, //标签
        contactInfoList: [],
        accountList: [],
      },
    };
  },
  mounted() {
    if (this.$Route.query.id) {
      this.id = this.$Route.query.id;
      this.$refs.info.getDataItem(this.id);
      this.$refs.contact.getDataItem(this.id);
      // this.$refs.account.getDataItem(this.id);
      // this.$refs.invoicing.getDataItem(this.id);
    }
  },
  methods: {
    save() {
      let item = Object.assign(
        this.build,
        this.$refs.info.datalist
      );
      item.processorContactInfoList = this.$refs.contact.processorContactInfoList;
      item.processorAccountList = this.$refs.account.processorAccountList;
      item.processorInvoiceInfo = this.$refs.invoicing.processorInvoiceInfo;
      // return;
      addOrUpdateData(item).then((res) => {
        console.log("res", res);
        if (!res.flag) return;
        this.$Router.back();
      });
    },
    tabChange(val) {
      this.componentsName = val.name;
    },
  },
};
</script>

<style lang='scss' scoped>
.tab-view {
  padding: 0 20rpx;
  background: linear-gradient(
    to right,
    rgb(64, 158, 255),
    rgb(64, 158, 255),
    rgb(96, 180, 246),
    rgb(96, 180, 246)
  );
}
.fixed-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx 20rpx;
  background: #fafafa;
  .card-btn {
    color: #409eff !important;
    border-radius: 40rpx 0 0 40rpx;
  }
  .save-btn {
    border-radius: 0 40rpx 40rpx 0;
  }
}
</style>